<template>
  <div class="listTemplate">
    <mt-header title="复查工作" class="header">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <i slot="right" @click="open = true" class="iconfont iconshaixuan4 active-color right-icon"></i>
    </mt-header>
    <section class="t-body">
      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <section v-for="(i,index) in listData" :key="index">
              <mu-paper class="demo-paper" :z-depth="2">
                <section
                  class="box"
                  @click="handlePushToDetail({id: i.reviewId,name:i.checkUserName})"
                >
                  <p class="line-list flex_b" v-if="i%2 == 0">
                    <span class>
                      <mu-badge small content="一般问题" color="error"></mu-badge>
                      <mu-badge small content="已整改" color="success"></mu-badge>
                    </span>
                    <mu-badge small content="一个问题" color="error"></mu-badge>
                  </p>
                  <p class="line-list flex_b" v-else>
                    <mu-badge small content="无问题" color="success"></mu-badge>
                  </p>
                  <p class="line-list textdot">
                    <span class>项目名称：{{i.orgName}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>检查部位：{{i.checkParts}}</span>
                  </p>
                  <p class="line-list">
                    <span>问题类型：{{i.problemTypeName}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>问题描述：{{i.problemDescription}}</span>
                  </p>
                  <p class="line-list">
                    <span>检查时间：{{i.checkTime}}</span>
                  </p>
                  <p class="line-list">
                    <span>整改期限：{{i.endTime}}</span>
                  </p>
                  <p class="line-list flex_b">
                    <span>
                      检查人：
                      {{i.checkUserName}}
                    </span>
                    <span>
                      复查人：
                      {{i.reviewUserName}}
                    </span>
                    <span>
                      整改责任人：
                      {{i.responsibleUserName}}
                    </span>
                  </p>
                  <section class="img-box">
                    <img src="../../../assets/img/default.png" />
                  </section>
                </section>
              </mu-paper>
            </section>
          </mu-list>
        </mu-load-more>
      </mu-container>
    </section>
    <!-- 筛选 -->
    <mu-bottom-sheet :open.sync="open">
      <mu-list @item-click="closeBottomSheet">
        <mu-sub-header>筛选条件</mu-sub-header>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span>检查结果：</span>
            <mu-select v-model="form.select" style="padding-bottom:0;margin-bottom:0;">
              <mu-option
                v-for="(option,index) in options"
                :key="index"
                :label="option"
                :value="option"
              ></mu-option>
            </mu-select>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span>问题等级：</span>
            <mu-select v-model="form.select" style="padding-bottom:0;margin-bottom:0;">
              <mu-option
                v-for="(option,index) in options"
                :key="index"
                :label="option"
                :value="option"
              ></mu-option>
            </mu-select>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;white-space:nowrap;">
            <span>开始时间：</span>
            <mu-date-input
              icon="today"
              v-model="form.startTime"
              container="bottomSheet"
              label-float
              full-width
            ></mu-date-input>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <mu-button full-width round color="success" @click="open = false">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-bottom-sheet>
  </div>
</template>

<script>
import apis from "../../../services/apis.js";
export default {
  name: "mainPage",
  data() {
    return {
      num: "",
      refreshing: false,
      loading: false,
      text: "List",
      open: false,
      options: ["Option 1", "Option 2"],
      form: {
        select: "",
        startTime: ""
      },
      // 新增
      listData: []
    };
  },
  mounted() {
    this.loadReviewWorkDataList();
  },
  created() {},
  methods: {
    loadReviewWorkDataList() {
      let request = {
        // userId:
        // num
      };
      this.$A
        .Go("get", apis.review_work_list, request)
        .then(res => {
          const { msg, body } = res;
          this.listData = body.rows;
          this.num = body.page.rows;
          this.$A.MS(msg);
        })
        .catch(err => {
          this.$A.MS(err);
        });
    },
    closeBottomSheet(isnot) {
      this.open = isnot;
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.text = this.text === "List" ? "Menu" : "List";
        this.num = 20;
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 20;
      }, 2000);
    },

    /**
     * @description 去详情页面
     * @param query {Object} 参数
     */
    handlePushToDetail(query) {
      console.log(query);
      this.$router.push({
        path: "/reviewDetail",
        query: query
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.listTemplate {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  .t-header {
    height: 0.45rem;
    width: 100%;
    color: #3d3d3d;
    box-sizing: border-box;
    padding: 5px 8px;
    position: relative;
    background-color: #fff;
    // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .t-close {
      min-width: 28px;
      border-radius: 50%;
    }
    .t-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.19rem;
      font-weight: 500;
    }
    .t-right-icon {
      font-size: 0.2rem;
    }
  }
  .t-body {
    height: calc(100% - 0.45rem);
    width: 100%;
    overflow: auto;
    background-color: #f8f8f8;
  }
  .t-body + .t-footer {
    height: 0.45rem;
    width: 100%;
  }
  .t-footer + .t-body {
    height: calc(100% - 0.9rem);
  }
  // 自定义样式
  .areaTitle {
    margin-top: 5px;
    font-size: 0.19rem;
    padding: 10px 20px;
  }
  .box {
    padding: 10px;
    margin-bottom: 5px;
  }
  .line-list {
    margin: 5px 0;
    font-size: 0.15rem;
  }
  .textdot {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.flex_b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style lang="scss">
.t-close {
  .mu-button-wrapper {
    padding: 0 !important;
  }
}
</style>
